
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    entry: {
        home: path.resolve(path.join(__dirname, "../src/pages/home/home.jsx")),
        main: path.resolve(path.join(__dirname, "../src/pages/main/main.jsx"))

    },
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, '../build'),
        filename: "static/[name].[hash].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        babelrc: false,
                        presets: [
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), { modules: false }]
                        ],
                        cacheDirectory: true
                    }
                }
            }, {
                test: /\.((c|sa|sc)ss)$/i,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                        },
                    },
                    {
                        loader: "postcss-loader",

                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env",
                                        {
                                            plugins: () => [postcssPresetEnv({ stage: 0 })]
                                        },
                                    ],
                                ],
                            }
                        },
                    },

                    {
                        loader: "sass-loader",
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,

                type: "asset",
            },



        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'home.html',
            inject: true,
            chunks: ['home']
        }),
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'main.html',
            inject: true,
            chunks: ['main']

        }),
        new CleanWebpackPlugin()
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                common: {
                    name: "common",
                    chunks: "initial",
                    minSize: 1,
                    priority: 0,
                    minChunks: 2,
                },
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    priority: 10,
                    minChunks: 2,
                }
            }
        },
        runtimeChunk: { name: 'manifest' }
    },
    devServer: {
        contentBase: path.resolve(__dirname, './build'),
        compress: true,
        port: 9000,
        open: true,
        openPage: 'main.html',
    }
}